<template>
  <div>
    <el-col :span="24" class="title-row">
      <span>| 修改巡查信息</span>
    </el-col>
    <el-form
      id="elForm"
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="92px"
      v-if="feature"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="道路编码" prop="roadcode">
            <el-input
              v-model="formData.roadcode"
              :disabled="false"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="道路名称" prop="roadname">
            <el-input
              v-model="formData.roadname"
              :disabled="false"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查员" prop="inspector">
            <el-input
              v-model="formData.inspector"
              :disabled="false"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查时间" prop="inspectiontime">
            <el-date-picker
              v-model="formData.inspectiontime"
              format="yyyy-MM-dd"
              value-format="timestamp"
              :style="{ width: '100%' }"
              placeholder="请选择巡查时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡查结果" prop="inspectionresult">
            <el-input
              type="textarea"
              v-model="formData.inspectionresult"
              placeholder="请输入巡查结果"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传照片" prop="field130">
            <!-- <el-upload
              ref="field130"
              auto-upload="false"
              :file-list="field130fileList"
              action="#"
              :before-upload="field130BeforeUpload"
              name="attachment"
            >
              <el-button size="small" type="primary" icon="el-icon-upload"
                >点击上传</el-button
              >
            </el-upload> -->
            <el-upload
              action="#"
              :auto-upload="false"
              list-type="text"
              :on-preview="handlePictureCardPreview"
              :file-list="picFileList"
              :on-remove="handleRemove"
              :on-change="handleChange"
              name="attachment"
              :multiple="true"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" v-dialogDrags width="50%">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
                :preview-src-list="picFileList"
              />
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="footer">
        <el-button type="primary" @click="submitForm" icon="el-icon-check"
          >提交</el-button
        >
        <!-- <el-button @click="resetForm">重置</el-button> -->
        <el-button
          type="primary"
          plain
          icon="el-icon-circle-close"
          @click="cancel"
          >返回</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  addAttach,
  getAttachList,
  deleteAttach,
} from "../../../../api/attachment/attach";
export default {
  props: {
    paramObj: { default: () => {} },
    mapview: { default: () => {} },
  },
  inject: ["toggleComponent"],
  // dicts: ["sys_cleancompany"],
  data() {
    return {
      rules: {
        inspector: [
          {
            required: true,
            message: "请输入巡查人员",
            trigger: "blur",
          },
        ],
        inspectiontime: [
          {
            required: true,
            message: "请输入巡查时间",
            trigger: "blur",
          },
        ],
        inspectioncontent: [
          {
            required: true,
            message: "请输入巡查结果",
            trigger: "blur",
          },
        ],
      },
      feature: undefined,
      formData: undefined,
      dialogImageUrl: "",
      dialogVisible: false,
      deleteAttachmentIds: [],
      addAttachments: [],
      picFileList: [],
    };
  },
  activated() {
    let _self = this;
    _self.feature = _self.paramObj.feature;
    _self.formData = _self.feature.attributes;
    _self.featureLayer = _self.paramObj.featureLayer;
    _self.getAttachment();
  },
  deactivated() {
    let _self = this;
    _self.feature = undefined;
    _self.formData = undefined;
    _self.featureLayer = undefined;
    _self.deleteAttachmentIds = [];
    _self.addAttachments = [];
    _self.picFileList = [];
  },
  methods: {
    submitForm() {
      let _self = this;
      _self.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        const edits = {
          updateFeatures: [_self.feature],
        };
        // 更新要素
        _self.featureLayer.applyEdits(edits).then(() => {
          _self.$message.success("修改成功");
          // 退出
          _self.cancel();
        });
        // 更新附件
        if (_self.addAttachments.length > 0) {
          const formData = new FormData();
          _self.addAttachments.forEach((attach) => {
            formData.append("files", attach.raw);
          });
          formData.append("attachGroupId", _self.feature.attributes.photo);
          addAttach(formData).then((data) => {
            console.log(data);
          });
        }
        // 删除附件
        if (_self.deleteAttachmentIds.length > 0) {
          deleteAttach({
            attachIds: _self.deleteAttachmentIds.toString(","),
          }).then((data) => {
            console.log(data);
          });
        }
      });
    },
    // 查询附件
    getAttachment() {
      let _self = this;
      _self.picFileList = [];
      const attachGroupId = _self.formData.photo;
      console.log("attachGroupId:" + attachGroupId);
      getAttachList(attachGroupId).then((response) => {
        if (response.code == "200" && response.data) {
          response.data.rows.forEach((element) => {
            const prefixUrl = window.mapConfig.nodeurl + "/attachfiles/";

            var obj = {
              id: element.attachId,
              name: element.attachName,
              url: prefixUrl + element.attachId + "." + element.attachType,
            };
            _self.picFileList.push(obj);
          });
        }
      });
    },
    // 获取要删除的附件id
    handleRemove(file) {
      console.log(file);
      // 如果是附件列表里存在则添加到待删除附件列表里
      if (file.url != undefined && file.url.indexOf("attachfiles") > 0)
        this.deleteAttachmentIds.push(file.id);
      this.addAttachments = this.addAttachments.filter(
        (val) => val.uid !== file.uid
      );
    },

    // 获取
    handleChange(file) {
      this.addAttachments.push(file);
      console.log(this.addAttachments);
    },
    handlePictureCardPreview(file) {
      console.log(file.url);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    cancel() {
      let _self = this;
      const paramObj = {
        roadcode: _self.feature.attributes.roadcode,
        roadname: _self.feature.attributes.roadname,
      };
      console.log("paramObj", paramObj);
      this.toggleComponent("inceptionDataPanel", paramObj);
    },
  },
};
</script>

<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 1vh;
}
.footer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}
</style>
